<template>
	<view style="padding-bottom: 120upx;" v-if="datas">
		<view class="bgFill"></view>
		<view class="infoBox flex align-center flex-direction">
			<image class="shopLogo" :src="datas.store.cover_url"></image>
			<text class="shopName">{{datas.store.name}}</text>
			<view class="shopclass flex align-center" style="margin-top: 20upx;">
				<text>{{datas.category.name}}</text>
				<text style="margin: 0 20upx;">|</text>
				<text>销量{{datas.sales_num}}</text>
			</view>
			<view class="flex align-center" style="margin-top: 20upx;">
				<view class="timeText">营业时间</view>
				<view class="timeInfo flex align-center justify-center">
					<block v-if="datas.store.is_all_day == '0'">
						<text>9:00</text>
						<text style="margin: 0 6upx;">~</text>
						<text>21:00</text>
					</block>
					<text v-else>24小时营业</text>
				</view>
			</view>
			<view class="addressInfo flex align-center justify-between" @click="tomap">
				<image src="/static/image/WB/address.png"></image>
				<view style="width: 400upx;">{{datas.store.address}} <view>{{datas.circle.name}}</view></view>
			</view>
			<view class="members flex align-center">
				<view>{{datas.fans}}粉丝</view>
				<text>|</text>
				<view>{{datas.views}}人气</view>
			</view>
		</view>
		<view class="elseBox">
			<view class="elseTitle">特色服务</view>
			<view class="services flex align-center flex-wrap">
				<view class="serviceItem flex align-center flex-direction">
					<image :src="`/static/image/WB/s1.png`"></image>
					<text>可停车</text>
				</view>
				<view class="serviceItem flex align-center flex-direction">
					<image :src="`/static/image/WB/s2.png`"></image>
					<text>免预约</text>
				</view>
				<view class="serviceItem flex align-center flex-direction">
					<image :src="`/static/image/WB/s4.png`"></image>
					<text>有折扣</text>
				</view>
				<view class="serviceItem flex align-center flex-direction">
					<image :src="`/static/image/WB/s6.png`"></image>
					<text>其他服务</text>
				</view>
			</view>
		</view>
		<view class="elseBox">
			<view class="elseTitle flex align-center justify-between">
				<text>商家介绍</text>
				<!-- <view class="addshop">+关注</view> -->
			</view>
			<view class="introduction">{{datas.store.description}}</view>
		</view>
		<view class="elseBox">
			<view class="elseTitle" style="margin-bottom: 20upx;">
				<text>商家展示</text>
			</view>
			<image class="shopImg" mode="widthFix" @click="viewImg(datas.store.pic_url,index)" v-for="(i,index) in datas.store.pic_url" :src="i.pic_url"></image>
		</view>
		<view class="bottomPart flex align-center">
			<view class="bleft flex align-center flex-direction justify-center" @click="phonecall">
				<image src="../../plugins/mch/static/image/shop-phone.png"></image>
				<text>联系商家</text>
			</view>
			<view class="b-right" @click="topay">
				优惠买单
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post,
		abortPost,
		get
	} from '@/utils/post.js'
	export default {
		components: {
			
		},
		data() {
			return {
				datas:''
			};
		},
		onLoad(op) {
			this.id = op.id
			this.loadData()
		},
		methods: {
			loadData() {
				get(this.$api.nearby.detail,{id:this.id},true,res=>{
					this.datas = res.data
				})
			},
			topay(){
				uni.navigateTo({
					url:'/pages/WB/linePay?id='+this.datas.id
				})
			},
			viewImg(arr,index){
				var imgs = []
				arr.map(item=>{
					imgs.push(item.pic_url)
				})
				uni.previewImage({
					current:index,
					urls:imgs
				})
			},
			phonecall(){
				uni.makePhoneCall({
				    phoneNumber: this.datas.mobile
				});
			},
			tomap(){
				if(this.datas.store.longitude){
					this.$config.weburl = `https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:${this.datas.store.latitude},${this.datas.store.longitude};title:${this.datas.store.poiaddress || ''};addr:${this.datas.store.address}&key=NMKBZ-NN3KR-OYQWQ-WPSXT-6SX6V-HIFFU&referer=msk`
					uni.navigateTo({
						url:'/pages/web2/web'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.shopImg{
		width: 100%;
	}
	.bleft{
		width: 340upx;
		background: #fff;
		height: 100%;
		font-size: 28upx;
		color: #888;
		border-top: 1px solid #eee;
	}
	.bleft image{
		width:40upx;
		height: 40upx;
	}
	.b-right{
		width: 410upx;
		line-height:100upx;
		background-image: linear-gradient(to right,#ffd171,#ff8959);
		color: #fff;
		text-align: center;
	}
	.bottomPart{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		z-index: 100;
	}
	.introduction{
		font-size: 24upx;
		margin-top: 20upx;
		color: #666;
	}
	.addshop{
		color:#ff9853;
		border: 1px solid #ff9853;
		line-height: 40upx;
		width: 80upx;
		text-align: center;
		font-size: 24upx;
	}
	.serviceItem{
		width: 25%;
		margin-top: 30upx;
		font-size: 24upx;
		color: #666;
	}
	.serviceItem image{
		width: 70upx;
		height: 70upx;
		margin-bottom: 10upx;
	}
	.elseTitle{
		font-size: 30upx;
		padding-left: 20upx;
		border-left: 4px solid #ff9853;
		line-height: 34upx;
	}
	.elseBox{
		width: 700upx;
		padding: 30upx;
		background: #fff;
		border-radius: 20upx;
		margin: 20upx auto 0;
	}
	.members{
		width: 100%;
		border-top: 1px solid #eee;
		padding-top: 20upx;
		margin-top: 20upx;
		font-size: 24upx;
		color: #aaa;
	}
	.members view{
		flex: 1;
		text-align: center;
	}
	.addressInfo{
		width: 460upx;
		font-size: 24upx;
		margin-top: 20upx;
	}
	.addressInfo image{
		width: 40upx;
		height: 40upx;
	}
	.timeInfo{
		font-size: 22upx;
		width: 180upx;
		color:#ff9853;
		border: 1px solid #ff9853;
		height: 40upx;
	}
	.timeText{
		line-height:40upx;
		width: 130upx;
		background:#ff9853;
		color: #fff;
		font-size: 22upx;
		text-align: center;
	}
	.shopclass{
		font-size: 24upx;
		color: #aaa;
	}
	.shopName{
		font-size: 30upx;
		font-weight: bold;
		line-height: 60upx;
	}
	.shopLogo{
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		margin-top: -90upx;
	}
	.infoBox {
		width: 700upx;
		padding: 20upx 40upx;
		margin: -60upx auto 0;
		background: #fff;
		border-radius: 10upx;
		box-shadow: 0 5px 5px #eee;
	}

	.bgFill {
		background-image: linear-gradient(to bottom,#ff8d5a, #ffbd61, #f5f5f5);
		width: 100%;
		height: 140upx;
	}

	page {
		background: #f5f5f5;
	}
</style>
